<!DOCTYPE html>
<html>
<head>
    <style>
        button {
            padding: 8px 16px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>

<input type="text" id="inputCode" placeholder="请输入验证码">
<button onclick="validateCode()">确认</button>
<button onclick="generateCode()">生成验证码</button>

<script>
    let code = generateRandomCode();

    function generateRandomCode() {
        let characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
        let result = '';
        for (let i = 0; i < 6; i++) {
            result += characters.charAt(Math.floor(Math.random() * characters.length));
        }
        return result;
    }

    function validateCode() {
        let input = document.getElementById('inputCode').value;
        if (input === '') {
            alert('请输入验证码');
        } else if (input.toLowerCase() !== code.toLowerCase()) {
            alert('您输入的验证码有误，请重新输入');
        } else {
            alert('验证成功');
        }
    }

    function generateCode() {
        code = generateRandomCode();
        alert('新验证码已生成: ' + code);
    }
</script>

</body>
</html>
